<template>
  <div class="user">
    <!-- 头像部分 -->
      <div class="head">
          <span><img :src="userImg" alt=""></span>
          <p>{{userName}}</p>
      </div>
      <!-- 中间内容部分 -->
      <div class="middle">
          <!-- 第一个 -->
           <div class="one" @click="getChips">
              <div class="pictrue">
                <img src="../assets/我的众筹@3x.png"  alt="">
              </div>
              <div class="word">
                <p class="first">我的众筹</p>
                <p class="second">我参与的活动众筹项目信息</p>
              </div>
              <div class="arrow">
                <img src="../assets/我的，更多@3x.png" alt="">
              </div>
           </div>
            <!-- 第二个 -->
           <div class="two" @click="getSupport">
              <div class="pictrue">
                <img src="../assets/我的支持@3x.png"  alt="">
              </div>
              <div class="word" >
                <p class="first">我的支持</p>
                <p class="second">我支持过的用户及活动</p>
              </div>
              <div class="arrow">
                <img src="../assets/我的，更多@3x.png" alt="">
              </div>
           </div>
            <!-- 第三个 -->
           <div class="three" @click="getfavorite">
              <div class="pictrue">
                <img src="../assets/我的收藏@3x.png"  alt="">
              </div>
              <div class="word" >
                <p class="first">我的收藏</p>
                <p class="second">喜欢的活动都可以一键收藏</p>
              </div>
              <div class="arrow">
                <img src="../assets/我的，更多@3x.png" alt="">
              </div>
           </div>
            <!-- 第四个 -->
           <div class="four" @click="getbinding">
              <div class="pictrue">
                <img src="../assets/账号绑定@3x.png"  alt="">
              </div>
              <div class="word" >
                <p class="first">账号绑定</p>
                <p class="second">绑定微信和手机号，一键登录</p>
              </div>
              <div class="arrow">
                <img src="../assets/我的，更多@3x.png" alt="">
              </div>
           </div>
      </div>
      <!-- 下载 -->
      <div class="download" @click="download"></div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    computed:{
        userImg(){
          return this.$store.state.userMessage.userUrl
        },
        userName(){
          return this.$store.state.userMessage.userName
        },
        identity(){
          return this.$store.state.userMessage.identity
        }
    },
    methods: {
        getChips() {
            if (!this.utils.cookie('get', 'user')) {
                this.$router.push({ path: '/login' })
                return
            }
            this.$router.push({ path: '/user_collect/' + this.identity })
        },
        getfavorite() {
            if (!this.utils.cookie('get', 'user')) {
                this.$router.push({ path: '/login' })
                return
            }
            this.$router.push({ path: '/user_favorite' })
        },

        getSupport() {
            if (!this.utils.cookie('get', 'user')) {
                this.$router.push({ path: '/login' })
                return
            }
            this.$router.push({ path: '/user_support' })
        },
        getbinding() {
            if (!this.utils.cookie('get', 'user')) {
                this.$router.push({ path: '/login' })
                return
            }
            this.$router.push({ path: '/user_binding' })
        },
        download() {
            if (!this.utils.cookie('get', 'user')) {
                this.$router.push({ path: '/login' })
                return
            }
            this.$router.push({ path: '/user_binding' })
        },
        download() {
            location.href =
                'http://a.app.qq.com/o/simple.jsp?pkgname=com.yishengjiaoyu.administrator.lifetimeeducation'
        }
    }
}
</script>

<style lang="less">
.user {
    .head {
        width: 100%;
        height: 3.5rem;
        background-size: cover;
        position: relative;
        background: url('../assets/bg.png') no-repeat center/cover;
        > span {
            position: absolute;
            height: 1.4rem;
            width: 1.4rem;
            border-radius: 50%;
            background-color: lightblue;
            top: 0.7rem;
            left: 50%;
            transform: translateX(-50%);
            > img {
                height: 1.4rem;
                width: 1.4rem;
                border-radius: 50%;
            }
        }
        > p {
            position: absolute;
            font-size: 0.36rem;
            top: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0.4rem;
            color: #333333;
            font-weight: 500;
        }
    }
    .middle {
        margin-top: 0.35rem;
        width: 100%;
        height: 4.8rem;
        border-top: 1px solid lightgray;
        // 1
        .one {
            height: 1.2rem;
            border-bottom: 1px solid lightgrey;
            position: relative;
            .pictrue {
                left: 0.3rem;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.7rem;
                    height: 0.7rem;
                }
            }
            .word {
                position: absolute;
                display: inline-block;
                left: 1.56rem;
                top: 50%;
                transform: translateY(-50%);
                .first {
                    font-size: 0.3rem;
                    color: #333333;
                }
                .second {
                    font-size: 0.24rem;
                    color: #999999;
                    padding-top: 0.08rem;
                }
            }
            .arrow {
                position: absolute;
                right: 0.3rem;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.27rem;
                    height: 0.5rem;
                }
            }
        }

        //  2
        .two {
            height: 1.2rem;
            border-bottom: 1px solid lightgrey;
            position: relative;
            .pictrue {
                left: 0.3rem;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.6rem;
                    height: 0.7rem;
                }
            }
            .word {
                position: absolute;
                display: inline-block;
                left: 1.56rem;
                top: 50%;
                transform: translateY(-50%);
                .first {
                    font-size: 0.3rem;
                    color: #333333;
                }
                .second {
                    font-size: 0.24rem;
                    color: #999999;
                    padding-top: 0.08rem;
                }
            }
            .arrow {
                position: absolute;
                right: 0.3rem;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.27rem;
                    height: 0.5rem;
                }
            }
        }
        //  3
        .three {
            height: 1.2rem;
            border-bottom: 1px solid lightgrey;
            position: relative;
            .pictrue {
                left: 0.3rem;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.7rem;
                    height: 0.7rem;
                }
            }
            .word {
                position: absolute;
                display: inline-block;
                left: 1.56rem;
                top: 50%;
                transform: translateY(-50%);
                .first {
                    font-size: 0.3rem;
                    color: #333333;
                }
                .second {
                    font-size: 0.24rem;
                    color: #999999;
                    padding-top: 0.08rem;
                }
            }
            .arrow {
                position: absolute;
                right: 0.3rem;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.27rem;
                    height: 0.5rem;
                }
            }
        }
        //4
        .four {
            height: 1.2rem;
            border-bottom: 1px solid lightgrey;
            position: relative;
            .pictrue {
                left: 0.3rem;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.6rem;
                    height: 0.76rem;
                }
            }
            .word {
                position: absolute;
                display: inline-block;
                left: 1.56rem;
                top: 50%;
                transform: translateY(-50%);
                .first {
                    font-size: 0.3rem;
                    color: #333333;
                }
                .second {
                    font-size: 0.24rem;
                    color: #999999;
                    padding-top: 0.08rem;
                }
            }
            .arrow {
                position: absolute;
                right: 0.3rem;
                top: 50%;
                transform: translateY(-50%);
                > img {
                    width: 0.27rem;
                    height: 0.5rem;
                }
            }
        }
    }

    //  下载
    .download {
        margin-top: 0.35rem;
        width: 100%;
        height: 1.2rem;
        background: url('../assets/广告.png');
        background-size: contain;
    }
}
</style>

